<template>
  <div class="seeAllrecord">
    <!-- 查看全部记录 -->
    <!-- <div class="showBanner" style="background: white;padding: 16px;border-bottom: none;padding-left: 30px">
      查看全部记录
    </div> -->
    <ShowBanner class="white"></ShowBanner>
    <div class="chooseContainer padding-box">
      <div class="padding-box">
        <div class="usermessage">
          <div class="userPhoto">
            <img :src="photo" alt="">
          </div>
          <div class="username">
            <span>{{name}}</span>
          </div>
          <div class="usertel">
            <span>{{mobile}}</span>
          </div>
        </div>
        <div style="margin-top:50px">
          <div class="shopChoose">
            <el-radio-group v-model="shopNowState" @change="change(shopNowState)">
              <el-radio-button :label="item.value" v-for="(item,index) in listNow" :key="index">{{item.text}}</el-radio-button>
            </el-radio-group>
          </div>
          <div style="border-top:1px solid #DCDFE6;">
            <template>
              <el-table :data="tableData" v-show="this.shopNowState!=='5'" stripe v-loading="loadingTable" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" style="width: 100%" header-row-class-name="myTableHeader">
                <el-table-column prop="orderNum" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="type" label="订单类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type===1">普通订单</span>
                    <span v-if="scope.row.type===2">特价订单</span>
                    <span v-if="scope.row.type === 3">活动订单</span>
                    <span v-if="scope.row.type === 4">分销订单</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="下单时间" align="center">
                </el-table-column>
                <el-table-column prop="spaceName" label="空间名称" align="center">
                </el-table-column>
                <el-table-column prop="payMoney" label="实际支付金额" align="center">
                </el-table-column>
                <el-table-column label="费用包含" align="center">
                  <template slot-scope="scope">
                    <div>拍摄费用:{{scope.row.shootMoney}}</div>
                    <div>其他费用:{{scope.row.payMoney-scope.row.shootMoney}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="订单状态" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==='0'">未付款</span>
                    <span v-if="scope.row.status==='1'">待确认</span>
                    <span v-if="scope.row.status==='2'">待拍摄</span>
                    <span v-if="scope.row.status==='3'">已完成</span>
                    <span v-if="scope.row.status==='4'">已评价</span>
                    <span v-if="scope.row.status==='5'">已取消</span>
                    <span v-if="scope.row.status==='6'">商家取消,待退款</span>
                    <span v-if="scope.row.status==='7'">已退款</span>
                    <span v-if="scope.row.status==='8'">商家超时取消</span>
                  </template>
                </el-table-column>
                <el-table-column label="拍摄日期" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type === 1">{{scope.row.shootDate}}&nbsp;({{scope.row.beginTime}}~{{scope.row.endTime}})</span>
                    <span v-if="scope.row.type === 2">{{scope.row.shootValidity}}</span>
                    <span v-if="scope.row.type === 3">2018-12-20~2019-12-20</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-table :data="tableDataUser" v-show="this.shopNowState==='5'" v-loading="loadingTable" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" stripe style="width: 100%" header-row-class-name="myTableHeader">
                <el-table-column prop="id" label="订单id" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="下单时间" align="center">
                </el-table-column>
                <el-table-column prop="type" label="订单类型" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type==='1'">场地订单</span>
                    <span v-if="scope.row.type==='2'">拍摄券购买</span>
                    <span v-if="scope.row.type==='3'">用户充值</span>
                    <span v-if="scope.row.type==='4'">会员购买</span>
                    <span v-if="scope.row.type==='5'">分销订单</span>
                  </template>
                </el-table-column>
                <el-table-column prop="payMoney" label="实际支付金额" align="center">
                </el-table-column>
                <el-table-column label="订单状态" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==='0'">未付款</span>
                    <span v-if="scope.row.status==='1'">付款成功</span>
                    <span v-if="scope.row.status==='2'">订单超时关闭</span>
                    <span v-if="scope.row.status==='3'">订单退款</span>
                    <span v-if="scope.row.status==='4'">订单关闭</span>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="消费内容" align="center">
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div class="pageContainer">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import recordList from './recordList'
import ShowBanner from '@/base/showBanner/showBanner'
import { mapGetters } from 'vuex'
import { pageCommon } from '@/assets/js/mixin'
export default {
  name: 'seeAllrecord',
  components: {
    recordList,
    ShowBanner
  },
  mixins: [pageCommon],
  data () {
    return {
      name: '',
      mobile: '',
      photo: '',
      shopNowState: '1',
      tableData: [],
      loadingTable: true,
      tableDataUser: [],
      listNow: [
        {
          text: '全部记录',
          value: '1'
        },
        {
          text: '已付款',
          value: '2'
        },
        {
          text: '未付款',
          value: '3'
        },
        {
          text: '已完成',
          value: '4'
        },
        {
          text: '消费记录',
          value: '5'
        }
      ]
    }
  },
  computed: {
    apiParams () {
      return {
        //
      }
    },
    ...mapGetters(['userInfo'])
  },
  methods: {
    change (val) {
      console.log(val)
      this.total = 0
      this.searchBtnList()
    },
    // dateFormat (row, column) {
    //   var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
    //   return date
    // },
    searchBtn () {
      this.$axios.post('/api/appUser/showOrdersByUserId',
        {
          userId: this.$route.query.id,
          str: this.shopNowState,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          this.name = res.name
          console.log(this.name)
          this.mobile = res.mobile
          this.photo = res.photo
          let arr = res.results
          console.log(arr)
          let spaceList = []
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            spaceList.push({
              id: arr[i].id,
              beginTime: arr[i].beginTime,
              endTime: arr[i].endTime,
              orderNum: arr[i].orderNum,
              shootDate: arr[i].shootDate,
              createTime: arr[i].createTime,
              spaceName: arr[i].spaceName,
              payMoney: arr[i].payMoney,
              type: arr[i].type,
              shootMoney: arr[i].shootMoney,
              status: arr[i].status,
              shootValidity: arr[i].shootValidity
            })
            userList.push({
              createTime: arr[i].createTime,
              id: arr[i].id,
              payMoney: arr[i].payMoney,
              status: arr[i].status,
              title: arr[i].title,
              type: arr[i].type
            })
          }
          this.tableData = [...spaceList]
          this.tableDataUser = [...userList]
          console.log(this.tableDataUser)
          this.total = res.total
        }
      })
    },
    searchBtnList () {
      this.$axios.post('/api/appUser/showOrdersByUserId',
        {
          userId: this.$route.query.id,
          str: this.shopNowState,
          pageNo: 1,
          pageSize: this.pageSize
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          this.name = res.name
          console.log(this.name)
          this.mobile = res.mobile
          this.photo = res.photo
          let arr = res.results
          console.log(arr)
          let spaceList = []
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            spaceList.push({
              id: arr[i].id,
              beginTime: arr[i].beginTime,
              endTime: arr[i].endTime,
              orderNum: arr[i].orderNum,
              shootDate: arr[i].shootDate,
              createTime: arr[i].createTime,
              spaceName: arr[i].spaceName,
              payMoney: arr[i].payMoney,
              type: arr[i].type,
              shootMoney: arr[i].shootMoney,
              status: arr[i].status,
              shootValidity: arr[i].shootValidity
            })
            userList.push({
              createTime: arr[i].createTime,
              id: arr[i].id,
              payMoney: arr[i].payMoney,
              status: arr[i].status,
              title: arr[i].title,
              type: arr[i].type
            })
          }
          this.tableData = [...spaceList]
          this.tableDataUser = [...userList]
          console.log(this.tableDataUser)
          this.total = res.total
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.seeAllrecord
  .usermessage
    height 70px
    .userPhoto
      margin-top 30px
      border-radius 50%
      width 80px
      height 80px
      // border 1px green solid
      img
        width 80px
        height 80px
    .username
      font-size 30px
      // display inline-block
      margin-left 100px
      margin-top -50px
    .usertel
      font-size 30px
      margin-left 300px
      margin-top -30px
    span
      margin-left 20px
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  justify-content space-between
  width 100%
  padding $spacing
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
.padding-box
  width 100%
</style>
